<!-- 评分标准 -->
<template>
  <div class="box">
    <!-- <div class="topBar">
      <div class="topBox">
        <el-row>
          <el-col class="head">
            <div style="display: flex">
              <div style="margin-right: 50px">
                <i class="name">规则编号：</i>GZ2030003000
              </div>
              <div><i class="name">规则名称：</i>GT</div>
            </div>
            <div>
              <i class="name">规则生效时间段：</i>2011年10月1日至2333年3月4日
            </div>
            <div>
              <i class="name">取数起止时间段：</i>2011年10月1日至2333年3月4日
            </div>
            <div><i class="name">等级最高分：</i>90分</div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="right"> -->
    <!-- 表格 -->
    <!-- <el-row :gutter="20">
        <el-col :span="16">
          <div class="tableBox">
            <div class="tableBoxChild">
              <el-table
                :data="tableData"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column
                  prop="customerId"
                  label="业务分类"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="customerNm"
                  label="指标名称"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="assessMethod"
                  label="业务分类"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  label="细分指标"
                  align="center"
                  :formatter="glFn"
                >
                </el-table-column>
                <el-table-column
                  prop="comments"
                  label="甲酸系数"
                  align="center"
                >
                </el-table-column>
                <el-table-column prop="comments" label="得分" align="center">
                </el-table-column>
              </el-table>
            </div> -->
    <!-- <el-pagination
              background
              layout="prev, pager, next"
              :total="total"
              @current-change="pageFn"
            >
            </el-pagination> -->
    <!-- </div> -->
    <!-- </el-col> -->
    <!-- <el-col :span="8">
          <div class="tableBox">
            <div class="tableBoxChild">
          <el-table :data="tableData" @selection-change="handleSelectionChange">
            <el-table-column label="细分指标" align="center" prop="name">
            </el-table-column>
            <el-table-column prop="name" label="预估得分" align="center">
            </el-table-column> </el-table
        >
      </div>
    </div>
      </el-col>
      </el-row> -->
    <!-- </div> -->
    <div class="topBar">
      <div class="topBox">
        <el-row>
          <el-col class="head" :span="12">
            <div style="display: flex">
              <div style="margin-right: 50px">
                <i class="name">规则编号：</i>GZ2030003000
              </div>
              <div><i class="name">规则名称：</i>GT</div>
            </div>
            <div>
              <i class="name">规则生效时间段：</i>2011年10月1日至2333年3月4日
            </div>
            <div>
              <i class="name">取数起止时间段：</i>2011年10月1日至2333年3月4日
            </div>
            <div><i class="name">等级最高分：</i>90分</div>
          </el-col>
          <el-col :span="12">
            <div class="tableBox">
              <div style="display: flex;margin-left:110px">
                <el-button type="primary" @click="bondInfoSubmit" class="btn">试算</el-button>
                <el-button type="primary" @click="bondInfoSubmit" class="btn">下载试算结果</el-button>
                <el-button type="primary" @click="bondInfoSubmit" class="btn">上传调整后结果</el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="bottom">
      <!-- 表格 -->
      <el-row>
        <el-col :span="12">
          <div style="display: flex;">
            <el-button type="primary" @click="bondInfoSubmit">新增客户</el-button>
            <el-button type="primary" @click="bondInfoSubmit">删除客户</el-button>
          </div>
        </el-col>
      </el-row>
      <!-- <div class="tableBox">
        <el-row :gutter="100">
          <el-col :span="12">
            <div class="tableBox">
              <div class="tableBoxChild">
                <el-table :data="tableData">
                  <el-table-column prop="name" label="指标项" align="center">
                  </el-table-column>
                  <el-table-column prop="customerNm" label="底线" align="center">
                  </el-table-column>
                  <el-table-column prop="assessMethod" label="高限" align="center">
                  </el-table-column>
                  <el-table-column label="试算结果" align="center" :formatter="glFn">
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-col>

        </el-row> -->
      <!-- <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          @current-change="pageFn"
        >
        </el-pagination> -->
      <!-- </div> -->
      <div class="tableBox table-panel">
        <div class="tableBoxChild">
          <CommonTable  :show-selection="true" :tableColumns="tableColumns" :tableData="tableData" :page="page"
            @handerSortChange="handerSortChange" @filterTable="filterTable" />
        </div>
        <!-- <div class="con-footer pagination" style="float: right;">
          <el-pagination small background layout="prev, pager, next" :total="total" @current-change="pageFn">
          </el-pagination>
        </div> -->
      </div>
    </div>
  </div>
</template>
<script>
import { getBond } from "@/api/common/index.js";
import {
  queryBondProbabilityDetail,
  newBondInfo,
} from "@/api/recommendationSystem/index.js";
import Pagination from "@/components/Pagination";
import CommonTable from "@/components/CommonTable";
export default {
  components: {
    Pagination,
    CommonTable,
  },
  data() {
    return {
      page: {
        page: 1,
        size: 10
      },
      tableColumns: [
        {
          column: "name",
          label: "客户名称",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          width: 120,
          sortable: false, // true, false, 'custom'(远程handerSortChange)
          headerFilter: true,
          filterType: "select", // select,input,date,daterange,空
          filterValue: [],
          headerFilterList: [
            {
              text: "1",
              value: "类型1",
              id: "1",
            },
            {
              text: "2",
              value: "类型2",
              id: "2",
            }
          ],
        },
        {
          column: "status",
          label: "客户类型",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          sortable: false,
          // width: 120,
          headerFilter: true,
          filterType: "select", // select,input,date,daterange,空
          filterValue: [],
          headerFilterList: [
            {
              text: "1",
              value: "类型1",
              id: "1",
            },
            {
              text: "2",
              value: "类型2",
              id: "2",
            }
          ],
        },
      ],
      tableData: [
        {
          name: '中国工商银行股份有限公司',
          status: '类型1'
        },
        {
          name: '中国建设银行股份有限公司',
          status: '类型2'
        },
        {
          name: '中国农业银行股份有限公司',
          status: '类型3'
        },
        {
          name: '北京银行股份有限公司',
          status: '类型4'
        },

      ],
      options: [
        {
          value: "选项1",
          label: "2021年考核系",
        },
        {
          value: "选项2",
          label: "2021年考核系",
        },
        {
          value: "选项3",
          label: "2021年考核系",
        },
        {
          value: "选项4",
          label: "2021年考核系",
        },
        {
          value: "选项5",
          label: "2021年考核系",
        },
      ],
      value: "",
      //  tabs切换
      activeName: "second",
      drawer: false,
      searchList: [],
      // tableData: [],
      searchInput: "",
      bondInfo: {},
      total: 0,
      count: "",
      bondTotal: 0,
      bondInfoForm: {
        bondSname: "",
        bondId: "",
        value1: "",
      },
    };
  },
  filters: {
    filterNum(value) {
      const str = value ? value.toString() : "";
      if (str) {
        const reg =
          str.indexOf(".") > -1 ? /\B(?=(\d{3})+\.)/g : /\B(?=(\d{3})+$)/g;
        const returnData = str.replace(reg, ",");
        return returnData;
      } else {
        return "";
      }
    },
  },
  mounted() { },
  methods: {
    //表格全选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //
    clearFn() {
      this.bondInfo = {};
    },
    bondInfoSubmit() {
      const param = {
        ...this.bondInfoForm,
        pn: 10,
        page: 1,
      };
      console.log("newBondInfo param", param);
      this.newBondInfo(param);
    },
    glFn(row) {
      return row.assessRate;
      // return Number(Number(row.assessRate) * 100).toFixed(2) + "%"
    },
    zjFn() {
      this.drawer = true;
      const param = {
        bondName: "",
        bondId: "",
        pn: 10,
        page: 1,
      };
      this.newBondInfo(param);
    },
    bondRowClick(row) {
      this.drawer = false;
      const param = {
        bondName: row.bondName,
        bondId: row.bondId,
        pn: 10,
        page: 1,
      };
      getBond(param).then((res) => {
        this.bondInfo = res.data.result[0];
      });
      queryBondProbabilityDetail({
        bondId: row.bondId,
        page: 1,
        pn: 10,
      }).then((res) => {
        console.log(res, "resres");
        this.tableData = res.data.result;
        this.total = Number(res.data.totalResults);
      });
    },
    bondPageFn(page) {
      const param = {
        bondName: "",
        bondId: "",
        pn: 10,
        page: page,
      };
      this.newBondInfo(param);
    },
    pageFn(currentPage) {
      console.log("pageFn", currentPage);
      queryBondProbabilityDetail({
        bondId: this.bondInfo.bondId,
        page: currentPage,
        pn: 10,
      }).then((res) => {
        this.tableData = res.data.result;
        this.total = Number(res.data.totalResults);
      });
    },
    newBondInfo(param) {
      const _this = this;
      newBondInfo(param).then((res) => {
        _this.searchList = res.data.result;
        _this.bondTotal = Number(res.data.totalResults);
        console.log(res, "resres");
      });
    },
    clickFn(v, i) {
      this.clearFn();
      this.count = i;
      this.bondInfo = {
        ...v,
      };
      queryBondProbabilityDetail({
        bondId: v.bondId,
        page: this.page,
        pn: 10,
      }).then((res) => {
        console.log(res, "resres");
        this.tableData = res.data.result;
        this.total = Number(res.data.totalResults);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.btn {
  width: 120px;
  height: 50px !important;
}

.head {
  line-height: 30px;

  .name {
    margin-right: 15px;
    font-weight: bold;
  }
}

.el-table ::v-deep th.el-table__cell {
  background-color: #1c2238 !important;
  color: #fff;
}

.pop .el-form ::v-deep .el-form-item .el-form-item__content .el-input__inner {
  width: 100%;
}

.pop .el-form ::v-deep .el-form-item .el-form-item__content .el-textarea__inner {
  border: 1px solid rgba(126, 163, 255, 0.3);
  color: #ffffff;
  background-color: #363657;
}

.pop ::v-deep .el-button--primary {
  border: 1px solid rgba(126, 163, 255, 0.3);
  color: #ffffff;
  background-color: #363657;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #363657;
  background: rgba(31, 155, 253, 0.2);
  color: #fff;
}

::v-deep .el-pagination.is-background .btn-next,
.el-pagination.is-background .el-pager li {
  background-color: #363657;
}

::v-deep .el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  background-color: #363657;
}

.box {
  .topBar {
    box-sizing: border-box;
    padding-top: 10px;
    min-height: 40px;
    background-color: #262d47;
    margin-bottom: 10px;
    padding-left: 10px;
  }

  .topBox {
    display: flex;
  }

  .left {
    width: 240px;
    background-color: #262d47;
    height: 100%;
  }

  .bottom {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .searchList {
    padding-top: 10px;
    height: 700px;
    overflow: scroll;
    padding-left: 10px;

    .searchListItem {
      height: 35px;
      line-height: 35px;
      text-align: center;
      color: #959fc5;
      font-size: 12px;
      overflow: hidden; //超出隐藏
      white-space: nowrap; //不折行
      text-overflow: ellipsis; //溢出显示省略号
    }

    .searchListItem:hover {
      background: #1f9bfd !important;
      color: #fff;
      cursor: pointer;
    }
  }

  .searchListItemAct {
    background: #1f9bfd !important;
    color: #fff !important;
  }

  .bondCard {
    display: flex;
    box-sizing: border-box;
    margin-top: 10px;
    background-color: #262d47;
    color: #ffffff;
    margin-bottom: 10px;
    height: 50px;
    line-height: 50px;
    padding-left: 10px;
    padding-right: 10px;
    justify-content: space-between;

    .lef {
      font-size: 20px;
    }

    .info {
      display: flex;
      padding: 20px 20px;
    }

    .infoItem {
      width: 300px;
    }

    .infoItemVal {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #d6dcff;
    }

    .infoItemLabel {
      margin-right: 30px;
      font-size: 14px;
    }
  }

  .el-table ::v-deep th.el-table__cell {
    background-color: #1c2238 !important;
    color: #fff;
  }

  .tableBox {
    background-color: #262d47;
    flex: 1;
    padding: 15px 10px;
  }

  .tableBoxChild {
    min-height: 200px;
  }

  .el-pagination {
    text-align: right;
  }

  .leftTitle {
    height: 40px;
    line-height: 40px;
    background: #354060;
    font-size: 14px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #ffffff;
    padding-left: 17px;
    margin-bottom: 10px;
  }

  .bondCardTitle {
    height: 40px;
    background: #354060;
    font-size: 14px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #ffffff;
    padding: 10px 16px;
  }
}
</style>

  